import { Pie } from '@antv/g2plot';
import { useEffect, useState } from 'react';

// const datasouce =
//   [
//     { type: '冰箱a', value: 500 },
//     { type: '冰箱b', value: 260 },
//     { type: '冰箱c', value: 200 },
//     // { type: '数据库异常', value: 10 },
//     // { type: '服务自身异常', value: 10 },
//     // { type: '其他', value: 10 },
//   ];

const PieChart = ({ id, datasouce }) => {
  const [typechart, setTypechart] = useState(null);
  useEffect(() => {
    if (typechart) {
      typechart.destroy();
    }
    const piePlot = new Pie('container' + id, {
      data: datasouce,
      height: 260,
      legend: {
        //图例项水平布局
        layout: 'horizontal',
        position: 'right',
        offsetX: -20,
        //是否分页
        flipPage: false,
        //图例项水平间距
        itemSpacing: 24,
        //图例项垂直间距
        itemMarginBottom: 34,
        //图例与图形的占比
        maxWidthRatio: 0.6,
        //图例图标
        marker: {
          symbol: 'square',
        },
        itemWidth: 120,
        //图例名
        itemName: {
          style: {
            fontSize: 14,
          },
        },
        //图例值
        itemValue: {
          //水平居右
          alignRight: true,
          // formatter(text) {
          //   return TransNumber(datasouce?.filter(item => item.type === text)[0].value)
          // },
          style: {
            fontSize: 14,
          },
        },
      },
      //空白间距
      pieStyle: {
        lineWidth: 6,
      },
      angleField: 'value',
      colorField: 'type',
      radius: 0.6,
      innerRadius: 0.6,
      label: false,
      interactions: [{ type: 'element-selected' }, { type: 'element-active' }],
      statistic: undefined,
    });

    piePlot.render();
    setTypechart(piePlot);
  }, []);
  return <div id={`container${id}`}></div>;
};

export default PieChart;
